{% extends "goalbase.html" %}
{% block content %}
<head>



</head>
<SCRIPT>
    $(function() {
        $( "#datepicker" ).datepicker();
    });
    </SCRIPT>
    
    
    <SCRIPT>
    $(function() {
        $( "#progressbar" ).progressbar({
            value: 37
        });
    });
    </SCRIPT>



<td width="89%" rowspan=2>

<div style="background:#cccccc;border:solid
1px #000000">



</div>  
 <table border ="1" width =300>
  <tr>
  <td> Title</td>
  <td> {{goal.title}} </td>
  </tr>
  <tr>
  <td> Deadline</td>
  <td> {{goal.deadline}}</td>
  </tr>
  <tr>
    <td>Progress</td>
    <td><DIV id=progressbar value = 80></DIV></td>
  </tr>
 </table>
 <table border ="1">
               {% if plans %}
                  {% for plan in plans %}   
                   <tr>
                     <td><input type="text" name="desc" value ="{{ plan.description }}"/></span></td>
                     <SCRIPT>
                          $(function() {
                            $( "#datepicker{{plan.id}}" ).datepicker();
                              });
                           </SCRIPT>
                     <td><INPUT id=datepicker{{plan.id}} value ="{{ plan.deadline }}"/></td>
                     <td>
                       <select name="s" size="1"
                        onchange="document.ex.state.value = document.ex.s.options[document.ex.s.selectedIndex]
                         .value;document.ex.s.value=''">
                          <option value=" " selected="selected"></option>
                          <option value="ACT">Daily</option>
                          <option value="NSW">Weekly</option>
                           <option value="NT">Monthly</option>
                        </select>
                      </td>
                     <td><a href="http://127.0.0.1:8000/goals/closePlan/?plan_id={{plan.id}}">Done</a></td>
                   </tr>
                {% endfor %}
               {% else %}
                   <p>No polls are available.</p>
               {% endif %} 
 </table>
 
{% endblock %}
